<%-- 
    Document   : index
    Created on : Apr 10, 2013, 12:52:34 AM
    Author     : Tadeu Augusto
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script lang="javascript" type="text/javascript">

            /**Facebook Like Button**/

            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id))
                    return;
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            /**Google +1**/

            window.___gcfg = {lang: 'pt-BR'};

            (function() {
                var po = document.createElement('script');
                po.type = 'text/javascript';
                po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(po, s);
            })();

            /**Busca**/

            var open = false;
            $(document).ready(function() {
                $('#buscar').click(function() {
                    open = !open;
                    if (open) {
                        $('#busca').slideToggle("fast");
                        $(this).parent().addClass("active");
                    } else {
                        $('#busca').slideToggle("fast");
                        $(this).parent().removeClass("active");
                    }
                });
            });

        </script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Portal de Acesso</title>
    </head>
    <body>
        <div id="content">
            <div id="topLeft">
                <a href="">
                    <img src="Imagens/Top_banner.png">
                </a>
            </div>
            <div id="navbar">
                <div id="navigation">
                    <table>
                        <tr>
                            <td>
                                <a href="">
                                    <img src="Imagens/home.png">
                                    <span>Início</span>
                                </a>
                            </td>
                            <td>
                                <a href="mail">
                                    <img src="Imagens/contato.png">
                                    <span>Contato</span>
                                </a>
                            </td>
                            <td id="t-buscar">
                                <a id="buscar" href="#">
                                    <img src="Imagens/busca.png">
                                    <span>Buscar</span>
                                </a>
                                <div id="busca">
                                    <input type="search" size="20">
                                </div>
                            </td>
                    </table>
                </div>
            </div>
            <div id="page">
                <div id="leftContent">
                    <h2 align="center">Acesso</h2>
                    <form action="acesso" id="acesso" method="post" name="acesso">
                        <table align="center">
                            <tr>
                                <td align="center">
                                    <strong>Usuário:</strong>
                                </td>
                            </tr>
                            <tr>
                                <td id='usuario' align="center">
                                    <input id="login" name="login" type="text" size="20">
                                    <script>
                                        $('#login').tooltip({
                                            placement: 'left',
                                            title: '<strong>Utilize seu CPF ou CNPJ</strong>',
                                            html: 'true',
                                            delay: {show: 200, hide: 500},
                                            animation: 'true'
                                        });
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <strong>Senha:</strong>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <input id="senha" name="senha" type="password" size="20"/>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <input class='button' type="submit" name="Acessar" value="Acessar" />
                                </td>
                            </tr>
                        </table>
                        <script>
                            $(function() {
                                $('#acesso').validate({
                                    rules: {
                                        login: {
                                            required: true,
                                            number: true
                                        },
                                        senha: {
                                            required: true
                                        }
                                    },
                                    messages: {
                                        login: {
                                            required: "Login não preenchido",
                                            number: "CPF inválido"
                                        },
                                        senha: {
                                            required: "Senha não preenchida"
                                        }
                                    },
                                    onkeyup: false,
                                    onfocusout: false,
                                    debug: false,
                                    wrapper: "div"
                                });
                            });
                        </script>
                    </form>
                    <br>
                    <div style="border-bottom: solid 1px #d3d3d3;" align="center">
                        <span>Não está registrado?</span>
                        <form action="cadastro" method="post" id="cadastrar">
                            <input class='button' type="submit" name="cadastrar" value="Registre-se" />
                        </form>
                        <br>
                    </div>
                    <br>
                </div>
                <div id="mainContent">
                    <div id="myCarousel" class="carousel slide" align="center">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item">
                                <img src="http://2.bp.blogspot.com/-yjKEktiuWYE/UXWra2pPAMI/AAAAAAAADBQ/TBya0f2zpR0/s1600/f2.jpg" width="100%" height="300">
                                <div class="carousel-caption">
                                    <h4>Título do Evento 1</h4>
                                    <p>Descrição do Evento 1</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="http://4.bp.blogspot.com/-2TSZZw5mas0/UYcAzxBNGkI/AAAAAAACVxk/Oedb3IvWBuE/s1600/super-imagens-super.jpeg" width="100%" height="300">
                                <div class="carousel-caption">
                                    <h4>Título do Evento 2</h4>
                                    <p>Descrição do Evento 2</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="http://guiaavare.com/img/upload/images/imagens%20de%20cachoeiras.jpg" width="100%" height="300">
                                <div class="carousel-caption">
                                    <h4>Título do Evento 3</h4>
                                    <p>Descrição do Evento 3</p>
                                </div>
                            </div>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                </div>
                <div id="rightContent">
                    <h2 align="center">Recursos</h2>
                    <a href="mapa">Mapa</a>
                    <h2 align="center">Compartilhe</h2>
                    <table align="center">
                        <tr>
                            <td>
                                <div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="g-plusone">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="clear">
                </div>
                <div id="footer">
                    <span>Página em Desenvolvimento</span>
                    <br>
                    <span>UFG - Universidade Federal de Goiás</span>
                    <br>
                    <span>Sistemas de Informação</span>
                </div>
            </div>
        </div>
        <script src="js/validate.js"></script>
    </body>
</html>